Layout Master helps you create CSS and HTML based page layouts. While hand-coding is relatively simple for many aspects of both HTML and CSS, when you use it for finely tuned page layouts with numerous positioned elements, getting a page that looks like this exactly right can take forever.
We haven't designed a tool to replace your existing HTML or web design tool of choice, simply one to compliment the tools you already use. Our idea is that you use Layout Master to create and edit your page layouts, and your other tools of choice for HTML and CSS editing. Layout Master is designed to be as un-invasive of your HTML as possible. Only the code you directly change using Layout Master is changed by Layout Master. Other applications refer to this as "round-trip html".
Using Layout Master is really straightforward, especially if you've used any kind of page layout program before. The basic principle is that you add "positioned elements" to a page, then size them (by dragging special handles) and place them (by dragging them). You can place elements inside one another, align elements, and change their "stacking order" (that is, which is closer to the front) using editors, or by pointing and clicking. If you want to fine tune the code, editors allow you to do this. Layout Master is completely compatible with hand editing your HTML. So you can switch between Layout Master and other HTML and web development tools, even while your HTML documents are open in Layout Master.
For all the possible complexity of positioning with CSS, using Layout Master is very straight forward.
Firstly, there is a Layout Window. This represents your HTML document (and ultimately, the web page you are creating). In a nutshell, we add positioned elements to this window, and position and size them by dragging and dropping.
At the core of the application are "positioned elements". A positioned element is simply a <div> element, with an associated style sheet rule which describes the element's position (and other properties, such as background and border). So the first step in using Layout Master, after we have created a new layout, is to create a positioned element. This is as easy as choosing a menu item.
Once we have our positioned element, we can drag it to the location we want, and set its width and height simply by selecting the element and dragging handles found on the element when it is selected. We can give our element some content: some text, and image, a table and so on.
Positioned elements can also contain one another (afterall, they are <div>s and <div>s can contain other <div>s). When a positioned element contains another positioned element, the element inside is positioned with respect to the top left hand corner of its container (also called its parent element). When an element is not contained inside a positioned element, then it is positioned with respect to its parent, which will most often be the <body> of the HTML document.
To place an element inside another element we use the Elements Editor, which allows us to easily move an element into or out of another element. For details on this process, see the section on the Elements Editor.
And, in a nutshell, that's just about all there is to getting started with positioning using Layout Master.
